<template>
  <el-card class="card">
    <el-tabs type="card" v-model="activeName" class="demo-tabs">
      <el-tab-pane name="first">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><calendar/></el-icon>
            <span>新增设备登记</span>
          </span>
        </template>
        <Separate></Separate>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><calendar/></el-icon>
            <span>批量资产导入</span>
          </span>
        </template>
        <Batch></Batch>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { Calendar } from '@element-plus/icons-vue'
import Separate from '@/views/page/assets/components/separate'
import Batch from '@/views/page/assets/components/batch'

const activeName = ref('first')
</script>

<style>
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}

.card {
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
</style>